<template>
  <div class="movieContainer">
    <Ad v-show="$store.state.showAD"></Ad>
    <div class="nav">
      <span @click="$router.push('/city')">{{$store.state.city.name}}</span>
      <router-link to="/home/movie/hotshowing" active-class="active">热映</router-link>
      <router-link active-class="active" to="/home/movie/theater">影院</router-link>
      <router-link active-class="active" to="/home/movie/coming-soon">待映</router-link>
      <router-link active-class="active" to="/home/movie/classic-movie">经典电影</router-link>
      <van-icon name="search" @click="$router.push({path:'/search'})" />
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import Ad from "./movie/Ad"

export default {
  components: {
    Ad
  }
}
</script>


<style lang="scss" scoped>
@import "../../assets/style/mixin.scss";
.movieContainer{
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.nav {
  height: 44px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 0;
  @include border1px(#666);
  span {
    position: relative;
    width: 50px;
    &::before {
      content: "";
      position: absolute;
      right: 0px;
      top: 8px;
      border-style: solid;
      border-width: 6px;
      border-color: #666 transparent transparent transparent;
    }
  }
  i::before {
    font-size: 20px;
    color: red;
  }
  a {
    color: rgb(71, 69, 69);
  }
  .active {
    color: #000;
    font-weight: 600;
    position: relative;
    &::after {
      content: "";
      position:absolute;
      bottom: -7px;
      width: 20px;
      left:50%;
      transform: translateX(-50%);
      height: 2px;
      background: red;
    }
  }
}
</style>


